<template>
	<div class="app-container" v-loading="loading">
		<div class="search-container  app_ny">
			<div class="div2" style="position: relative">
				<el-row :gutter="12" style="width: 100%">
					<el-col :span="3">
						<el-input v-model="queryParams.name"
								  clearable
								  placeholder="请输入业务名称"
									@keyup.enter="handleQuery" />
					
					</el-col>
					<el-col :span="3">
						<el-input v-model="queryParams.engine"
							clearable
							placeholder="请输入工程名称"
							@keyup.enter="handleQuery" />
						
					</el-col>
					
					<el-col :span="6">
						<el-button :loading="loading" type="primary" @click="handleQuery"><template
								#icon><i-ep-search /></template>查询</el-button>
					</el-col>
				</el-row>
				<FilterColumn class="filtBox" @handleRefresh="resetQuery()" :strtype="strtype"></FilterColumn>
			</div>
		</div>


		<el-card shadow="never">
			
			<div class="action-row">
				<el-button v-hasPerm="['engineering.Payment/save']"  @click="handleDo('','act_add')" type="primary" plain><template #icon><i-ep-plus /></template>新增</el-button>
				<el-button  @click="handleDo('', 'act_info')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-document/></template>详情</el-button>
				<el-button v-hasPerm="['engineering.Payment/update']" @click="handleDo('', 'act_edit')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-edit/></template>修改</el-button>
				<el-button v-hasPerm="['engineering.Payment/delete']" @click="handleDo('', 'act_del')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-delete/></template>删除</el-button>
			</div>
			
			<el-table ref="dataTableRef" v-loading="loading" 
				:data="tableData"
				align="left" 
				tooltip-effect="dark"
				:show-overflow-tooltip="true"
				:scrollbar-always-on="true"		
				border 
				@cell-mouse-enter="rowMouse"
				@cell-mouse-leave="menuLineVisible=false"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" align="center" width="55" />
				<el-table-column type="index" label="序号" align="center" width="80" />
				<template v-for="(item,index) in cColumnsList()" :key='index'>
					<el-table-column 
						:label="item.label" 
						:align="item.align" 
						:prop="item.prop" 
						:width="item.width"
						:min-width="item.minwidth">
						<template #default="scope" v-if="item.prop == 'level'">
							<el-tag v-if="scope.row.level == 2"  type="danger">紧急</el-tag>
							<el-tag v-else type="primary">普通</el-tag>
						</template>
						<template #default="scope" v-if="item.prop == 'files'">
							<template v-if="scope.row.files.length>0">
								<el-link @click="handleDo(scope.row, 'act_info')" type="primary"> {{scope.row.files.length}}<template #icon><i-ep-link/></template>附件</el-link>	
							</template>
								<el-text  v-else type="info">无</el-text >
						</template>	
						<template #default="scope" v-if="item.prop == 'status'">
							<el-tag  :type="titModel[scope.row.status].type">{{titModel[scope.row.status].title}}</el-tag>
						</template>
						
					</el-table-column>
				</template>
			</el-table>
			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</el-card>

		<!-- 编辑 or 添加 -->
		<paymentEdit 
			v-if="dialogAdd.visible"
			v-model="dialogAdd.visible"
			:dialogTitle="dialogAdd.title"
			:dialogTableValue="dialogAdd.value"
			:dialogStatus="dialogAdd.status"
			:approveList="approveList"
			 @initRefreshList="handleQuery">
		</paymentEdit>

	</div>
</template>
<script setup lang="ts">
	
	import _ from 'lodash-es'
	import { useUserStore } from "@/store/modules/user";
	import { useTableFilterStore } from "@/store/modules/tableFilter";
	import paymentEdit from "./components/paymentEdit.vue";
	
	import {
		deleteEngineeringPayment,
		getEngineeringPaymentList
	} from "@/api/engine";
	//接口地址
	import {
		approveInitInfo
	} from "@/api/approve";
	
	const TableFilter = useTableFilterStore();
	const userStore = useUserStore();
	const strtype = ref('enginePayment'); //数据
	
	// 表格标题
		const cTitles = ["工程名称","业务名称","所属部门","部门领导","紧急程度","申请事由","业务依据","预算金额","附件","申请人","申请时间","审批状态"];
		// 显示字段
		const sTitles = ["工程名称","业务名称","紧急程度","申请人","申请时间","审批状态"];
		// 字段属性
		const cColumns =[
		 
		 { label: "工程名称",prop:"engine.name",align:"center",minwidth:200 },
		 { label: "业务名称", prop:"name",align:"center",minwidth:200 },
		 { label: "所属部门",prop:"department.name",align:"center",minwidth:200 },
		 { label: "部门领导",prop:"leader_user.name",align:"center",minwidth:150 } ,
		 { label: "紧急程度",prop:"level",align:"center",minwidth:150 } ,
		 { label: "申请事由",prop:"content",align:"center",minwidth:200 } ,
		 { label: "业务依据",prop:"yiju",align:"center",minwidth:200 } ,
		 { label: "预算金额",prop:"amount",align:"center",minwidth:150 } ,
		 { label: "附件",prop:"files",align:"center",minwidth:150 } ,
		 { label: "申请人", prop:"user.name",align:"center",minwidth:150 },
		 { label: "申请时间",prop:"add_time_text",align:"center",minwidth:200 } ,
		 { label: "审批状态",prop:"status",align:"center",width:130 }
		]	
		interface TableGlobalLocal {
		  [key: string]: any; // 或者更具体的类型
		}
		// 列表渲染
		function cColumnsList(){
			const ColumnsList = (TableFilter.tableGlobalLocal as TableGlobalLocal)[strtype.value + '_checklist'];
			if(ColumnsList)
			{
				const columnMap:any = {}; // 创建一个对象来存储cColumns中label和对象的映射  
				// 预先建立label到对象的映射  
				for (const column of cColumns) {  
					columnMap[column.label] = column;  
				}  
				const newList = [];  
				for (const label of ColumnsList) {  
					// 尝试从映射中获取对象  
					const foundColumn = columnMap[label];  
					if (foundColumn) {  
						// 如果找到了，则添加到newList中  
						newList.push(foundColumn);  
					}  
				}  
				return newList;  
			}
			else
			{
					return [];
			}
		};
		// 列表-数据列初始化
		function columnsInit() {
		  const dropColStr:string =strtype.value + '_dropCol';
		  const checklistStr:string = strtype.value + '_checklist';
		  const drop_col:any = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
		  const checklist = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]; 
		  if(!drop_col)
		  {
			  (TableFilter.tableGlobalLocal as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
			  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
		  }
		  if(!checklist)
		  {
			  (TableFilter.tableGlobalLocal as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles)) ;
			  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles));
		  }
		}
	
	
	
	const queryParamsData={
		page: 1,
		limit: 20,
		name: "",//业务名称
		engine:"",//工程名称
	}
	//搜索-字段配置
	const queryParams = reactive(JSON.parse(JSON.stringify(queryParamsData)));
	const loading = ref(false);//页面加载load
	const total = ref(0);
	const tableData = ref<any>();
	const multipleSelection =ref<any>([]);
	const menuLineVisible =ref(true);
	const rowR = ref<any>({});
	
	const dialogAdd = reactive<any>({
		title: "添加信息", //弹窗标题
		visible: false,   //弹窗显示or隐藏
		status:"add_art", //弹窗状态类型  :添加 add_art 编辑 edit_art 详情 detail_art  
		value:{}   		  //携带整条参数 row
	});

	const titModel=ref([{
	    title:'待审核',
	    type:'info'
	  },{
	    title:'已通过',
	    type:'success'
	  },{
	    title:'已驳回',
	    type:'danger'
	  }])
	  
	 // 行菜单事件
	 function rowMouse(row:any) {
	 	menuLineVisible.value = true
	 	rowR.value = row
	 }
	 // 数据多选事件
	 function handleSelectionChange(val:any) {
	 	multipleSelection.value = val
	 }
	 
	 // 操作按钮样式
	 function buttonType(val:number) {
	 	if (val === 1) {
	 		return 'primary'
	 	} else {
	 		return 'info'
	 	}
	 }  
	 // 操作
	 function handleDo(row:any, act:string) {
	 	dialogAdd.status = act
	 	switch (act) {
	 		case 'act_add':
	 			dialogAdd.visible = true;
	 			dialogAdd.title = '添加信息';
	 			dialogAdd.value = {};
	 			break
	 		case 'act_info':
	 			var rowItem= JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
	 			dialogAdd.visible = true;
	 			dialogAdd.title = '工单详情';
	 			dialogAdd.value = rowItem;
	 			break
	 		case 'act_edit':
	 			var rowItem= JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
	 			dialogAdd.visible = true;
	 			dialogAdd.title = '修改信息';
	 			dialogAdd.value = rowItem;
	 			break
	 		case 'act_del':
	 			handleDelete(JSON.parse(JSON.stringify(row || multipleSelection.value[0])))
	 			break
	 		default:	
	 	}
	 }   
	 
	 
	 
	  
	// 初始化搜索内容
	function handleQuery() {
		loading.value = true;
		console.log('加载数据')
		getEngineeringPaymentList(queryParams).then((res) => {
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false;
		})
	}
	// 重置搜索内容
	function resetQuery() {
		handleQuery();
	}

	// 删除表单内容
	function handleDelete(row ?: any) {
		const Ids =row.id;
		if (!Ids) {
			ElMessage.warning("请勾选删除项");
			return;
		}
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(() => {
			loading.value = true;
			deleteEngineeringPayment({id:Ids})
			  .then(() => {
			    ElMessage.success("删除成功");
			    resetQuery();
			  })
			  .finally(() => (loading.value = false));
			  
		}).catch(()=>{});
	}
	
	
	
	const approveList = ref<any>({type:0,rule:[[]]});
	// 获取options 配置项
	function get_options() {
		approveInitInfo({type:5}).then((res) => {
			console.log(res.data.rule)
			if(res.data.status==1)
			{
				approveList.value.type = 1 
				approveList.value.rule =res.data.rule
			}
			else
			{
				approveList.value.type = 0
				approveList.value.rule =[{name: "",user_info:[]}]
			}	
		}).finally(() => { })
	}
	onMounted(() => {
		handleQuery();
		columnsInit();
			get_options();
	});
</script>

<style lang="scss" scoped>

</style>